<template>
    <div class="user_dialog">
        <el-dialog
            v-model="visible"
            :width="width"
            :show-close="false"
            destroy-on-close
            @open="open"
            @close="handleCloseDialog"
        >
            <template #header="{ close }">
                <div class="user-diag-header">
                    <span> {{ dialogTitle }} </span>
                    <SvgIcon
                        @click="handleCloseDialog"
                        icon-class="dialog_close"
                        width="22px"
                        height="22px"
                    />
                    <SvgIcon
                        @click="handleCloseDialog"
                        icon-class="dialog_myi"
                        class="dialog_myi"
                        width="130px"
                        height="54px"
                    />
                </div>
            </template>
            <slot name="userDiagContent"></slot>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
const visible = defineModel("modelValue", {
    type: Boolean,
    required: true,
    default: false,
});

const emit = defineEmits(["handleCloseDialog", "open"]);

const props = defineProps({
    dialogTitle: {
        required: false,
        default: () => "",
    },
    width: {
        required: false,
        default: () => "1226px",
    },
});

const handleCloseDialog = () => {
    emit("handleCloseDialog");
};
const open = () => {
    emit("open");
};
onBeforeMount(() => {});
</script>

<style lang="scss" scoped>
.user_dialog {
    :deep(.el-dialog) {
        padding: 0;
        padding-bottom: 20px;
        .el-dialog__header {
            height: 54px;
            padding: 0;
            .user-diag-header {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                font-size: 14px;
                color: #222222;
                height: 54px;
                width: 100%;
                background: linear-gradient(76deg, #ffffff 0%, #e3eeff 100%);
                border-radius: 8px 8px 0px 0px;
                display: flex;
                padding: 20px 12px 14px 34px;
                justify-content: space-between;
                .svg-icon {
                    cursor: pointer;
                }
            }
            .icon_dialog_close {
                z-index: 1000;
            }
            .icon_dialog_myi {
                position: absolute;
                top: 0;
                right: 0;
            }
        }
    }
}
</style>
